<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://hol.com/functions" prefix="hfn"%>
<c:set var="base" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>

<meta charset="utf-8">
<title>后台登录</title>


<script type="text/javascript">
var curIndex = 0;
//时间间隔(单位毫秒)，每秒钟显示一张，数组图片放在images文件夹下。
var timeInterval = 3000;

                        //定义一个存放照片位置的数组，可以放任意个，
var arr = new Array();
arr[0] = "images/皎月.jpg";

setInterval(changeImg, timeInterval);
function changeImg() {

                                //获得id名为ddd1的对象
var obj = document.getElementById("ddd1");
if (curIndex == arr.length - 1) {
curIndex = 0;
} else {
curIndex += 1;
}
                        //设置d1的背景图片
obj.style.backgroundImage= "URL("+arr[curIndex]+")";       //显示对应的图片
}
</script>




<script type="text/javascript">		 
		function refresh()
        {
            var img = document.getElementById("img_validation_code")
            img.src = "validation_code?" + Math.random();            
        }
        function checkLogin(form)
		{
		    var username = document.getElementById("username");

    		// 用户名必须输入
    		if(username.value == "")
    		{
        		alert("必须输入用户名!");
        		username.focus();
        		return;
    		}
    		var password = document.getElementById("password");
   			 // 密码必须输入
   			if(password.value == "")
    		{
        		alert("必须输入密码!");
        		password.focus();
        		return;
    		}
    		
    	
    		var validation_code = document.getElementById("validation_code");
    		
    		if(validation_code.value == "")
    		{
    		    alert("验证码必须输入!");
        		validation_code.focus();
        		return;
    		}
    		
    		// 必须输入验证码
   			login_form.submit();
		}  
        
		 
	</script> 

  <script type="text/javascript">
	    	function reg(form){
	        	if(form.username.value == ""){
	        		alert("用户不能为空！");
	        		return false;
	        	}
	        	if(form.password.value == ""){
	        		alert("密码不能为空！");
	        		return false;
	        	}
	        	if(form.repassword.value == ""){
	        		alert("确认密码不能为空！");
	        		return false;
	        	}
	        	if(form.password.value != form.repassword.value){
	        		alert("两次密码输入不一致！");
	        		return false;
	        	}
	        	if(form.tel.value == ""){
	        		alert("联系电话不能为空！");
	        		return false;
	        	}
	        
	    	}
	    </script>





<link rel="stylesheet" href="./HTML5_files/layui.css" media="all">
<link rel="stylesheet" href="./HTML5_files/login.css">
<link rel="stylesheet" href="./HTML5_files/tooltips.css">


<script type="text/javascript" src="./HTML5_files/jquery.min.js.下载"></script>
<script type="text/javascript" src="./HTML5_files/jquery.pure.tooltips.js.下载"></script><style type="text/css"></style>
<script type="text/javascript" src="./HTML5_files/layui.js.下载"></script>
<style>

div#ddd1 {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -10;
  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  zoom: 1;
 
  opacity:1;
  transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
}



body {
	margin:0;
	padding:0;
	overflow:hidden;
	background:#2d9b95;
	background:-moz-radial-gradient(center,ellipse cover,#2d9b95 0%,#0e1329 100%);
	background:-webkit-radial-gradient(center,ellipse cover,#2d9b95 0%,#0e1329 100%);
	background:-o-radial-gradient(center,ellipse cover,#2d9b95 0%,#0e1329 100%);
	background:-ms-radial-gradient(center,ellipse cover,#2d9b95 0%,#0e1329 100%);
	background:radial-gradient(ellipse at center,#2d9b95 0%,#0e1329 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d9b95',endColorstr='#0e1329',GradientType=1 );
	background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#2d9b95),color-stop(100%,#0e1329));
}
.box {background:#000000; position:absolute;margin-left:-14%; z-index:3;opacity: 0.6;left:50%;}
.box-login{width:450px; height:295px;margin-top:-10%;top:50%;}
.box-register{width:450px; height:385px;margin-top:-8%;top:46%;}
.box-reset{width:450px; height:385px;margin-top:-8%;top:46%;}
#register {display:none;}
#reset{display:none;}
</style>

<link id="layuicss-skinlayercss" rel="stylesheet" href="./HTML5_files/layer.css" media="all"></head>
<body style="bottom:inherit;">
<div id="ddd1" style="background-image: url('images/皎月.jpg') ">
<canvas width="1440" height="821" style=""></canvas>

<div class="beg-login-box box box-login layui-anim-up" id="login" style="display:block;height: 400px">
	<header>
		<h1 style="color:#FFFFFF">欢迎登录</h1>
	</header>
	<div class="beg-login-main">
		<form action="${base }/action/login/logCheck" class="layui-form" method="post" onSubmit="return checkLogin(this);"><input name="__RequestVerificationToken" type="hidden" value="fkfh8D89BFqTdrE2iiSdG_L781RSRtdWOH411poVUWhxzA5MzI8es07g6KPYQh9Log-xf84pIR2RIAEkOokZL3Ee3UKmX0Jc8bW8jOdhqo81">		
			
			<div class="layui-form-item">
				<label class="beg-login-icon">
				<i class="layui-icon"></i>
			</label>
				<input id="userName" type="text" name="userName"  autocomplete="off" placeholder="请输入登录名" class="layui-input">
			</div>
			<div class="layui-form-item">
				<label class="beg-login-icon">
				<i class="layui-icon"></i>
			</label>
				<input id="password" type="password" name="userPassword" lay-verify="password" autocomplete="off" placeholder="请输入密码" class="layui-input">
			</div>
			
			<div class="layui-form-item">
				<input type="hidden" name="where" value="1">
				<div class="beg-pull-left beg-login-remember" style="color:#FFFFFF;margin-top: 1%;">
					<label>记住账号</label>
					<input id="urlswitch" type="checkbox" name="urlswitch" lay-skin="switch" lay-text="on/off" checked><div class="layui-unselect layui-form-switch"><i></i></div>
				</div>
				
				<input type="hidden" id= "url" name="url" >
				<div class="beg-clear"></div>
			</div>
			
			<div class="layui-form-item">
				<div class="beg-pull-left beg-login-remember" style="color:#FFFFFF;margin-top: 1%;">
					<button class="layui-btn layui-btn-radius layui-btn-primary" onclick="goto_register();return false;">
					<i class="layui-icon"></i> 注册
				</button></div>
				
				<div class="beg-pull-right">
					<button onclick="login();return false;" type="submit" class="layui-btn layui-btn-radius" style="margin-top: 4%;" >
					<i class="layui-icon"></i> 登录
				</button>
				</div>
			</div>
		</form>
	</div>
</div>

<div class="beg-login-box box box-register layui-anim-rotate" id="register" style="display: none;height: 500px;width: 500px">
	<header>
		<h1 style="color:#FFFFFF">欢迎注册</h1>
	</header>
	<div class="beg-login-main">
		<form action="${base }/action/login/regAccount" class="layui-form" method="post"onsubmit="return reg(this);"><input name="__RequestVerificationToken" type="hidden" value="fkfh8D89BFqTdrE2iiSdG_L781RSRtdWOH411poVUWhxzA5MzI8es07g6KPYQh9Log-xf84pIR2RIAEkOokZL3Ee3UKmX0Jc8bW8jOdhqo81">		
			<div class="layui-form-item">
				<label class="beg-login-icon">
				<i class="layui-icon"></i>
			</label>
				<input id="username_register" type="text" name="userName"  autocomplete="off" placeholder="请输入用户名" class="layui-input">
			</div>
			<div class="layui-form-item">
				<label class="beg-login-icon">
					<i class="layui-icon"></i>
				</label>
				<input id="password_register" type="password" name="userPassword" lay-verify="password" autocomplete="off" placeholder="请输入密码" class="layui-input">
			</div>
			<div class="layui-form-item">
				<label class="beg-login-icon">
					<i class="layui-icon"></i>
				</label>
				<input id="determine_password_register" type="password" name="repassword" lay-verify="password" autocomplete="off" placeholder="确认密码" class="layui-input">
			</div>
			
			
			<div class="layui-form-item">
				
				
				  <table>
				  <tr>
				  <td style="color: ;">
				  <a>男</a>
				  <input type="radio" name="sex" value="男" checked="checked" />
				   <a>女</a>  
		<input type="radio" name="sex" value="女" /></td>
				  </tr>
				  </table>  		
		
						    	
						    
			</div>
			
				<div class="layui-form-item">
				<label class="beg-login-icon">
					<i class="layui-icon"></i>
				</label>
				<input id="" type="text" name="userPhone" autocomplete="off" placeholder="请输入电话号码" class="layui-input">
						<input type="hidden" name="type"  value="10">
		
			</div>
			
			

			
			
			
		
			
			
			<div class="layui-form-item">
				<div class="beg-pull-left beg-login-remember" style="color:#FFFFFF;margin-top: 9%;">
					<button class="layui-btn" type="submit" >
					<i class="layui-icon"></i> 注册
				</button></div>
				
				<div class="beg-pull-right">
					<button class="layui-btn layui-btn layui-btn-primary" style="margin-top: 18%;" onclick="goto_login();return false;">
					<i class="layui-icon"></i> 返回登录
				</button>
				</div>
			</div>
		</form>
	</div>
</div>


</div>




 <div class="div3"> 
					    <% 
					    	// 获取提示信息
							String info = (String)request.getAttribute("info");
					    	// 如果提示信息不为空，则输出提示信息
							if(info != null){
								//out.println(info);
								%>
								<script type="text/javascript" language="javascript">
                              alert("<%=info%>");                                            // 弹出错误信息
                              </script> 
								
							
							<% 	
							}
					    	// 获取登录OR注册的用户信息
							//User user = (User)session.getAttribute("user");
					    	// 判断用户是否登录OR注册
							//if(user != null){
						%>
				
					
						
				  	 </div>







<script type="text/javascript">
//针对动画效果的API接口
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     ||  
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();
//通过在canvas上作图来实现动画
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var w = $(document).width();
var h = $(document).height();
canvas.width = w;
canvas.height = h;

var mols = [];

function init(){
  for(var i=0;i<18;i++){
    var mol = new generate_mol("C8H10N4O2");
    mols.push(mol);
    var mol = new generate_mol("C6H6O");
    mols.push(mol);
    var mol = new generate_mol("C6H6");
    mols.push(mol);
  }
}

function draw(){
  canvas.width = canvas.width;
  for(var i=0;i<mols.length;i++){
    var m = mols[i];
    m.x += m.vx;
    if(m.x >= w-100 || m.x <= 0){
      m.vx = -m.vx;
    }
    m.y += m.vy;
    if(m.y >= h-100 || m.y <= 0){
      m.vy = -m.vy;
    }
    
    m.r += 0.005;
    m.draw();
  }
}

function generate_mol(mol){
  this.x = Math.random()*w;
  this.y = Math.random()*h;
  this.vx = Math.random()*-2;
  this.vy = Math.random()*2;
  this.vr = 0.1;
  this.r = Math.random()*Math.PI;
  this.draw = function(){
    if(mol == "C6H6O"){
      //Phenol
      ctx.save();
      ctx.translate(this.x+20,this.y+80);
      ctx.rotate(this.r);
      ctx.translate(-this.x+20,-this.y-80);
      ctx.beginPath();
      ctx.moveTo(this.x,this.y + 5);
      ctx.lineTo(this.x,this.y + 30);
      ctx.lineTo(this.x - 26,this.y + 45);
      ctx.lineTo(this.x - 26,this.y + 75);
      ctx.lineTo(this.x,this.y + 90);
      ctx.lineTo(this.x + 26,this.y + 75);
      ctx.lineTo(this.x + 26,this.y + 45);
      ctx.lineTo(this.x,this.y + 30);
      ctx.moveTo(this.x - 20,this.y + 47);
      ctx.lineTo(this.x - 20,this.y + 73);
      ctx.moveTo(this.x,this.y + 83);
      ctx.lineTo(this.x + 22,this.y + 70);
      ctx.moveTo(this.x,this.y + 36);
      ctx.lineTo(this.x + 22,this.y + 49);
      ctx.strokeStyle = "rgba(255,255,255,0.2)";
      ctx.lineWidth = 3;
      ctx.stroke();
      ctx.fillStyle = "rgba(255,255,255,0.2)";
      ctx.font = "15px Arial";
      ctx.fillText("OH", this.x - 5, this.y);
      ctx.closePath();
      ctx.restore();
    }
    else if(mol == "C8H10N4O2"){
      //Caffeine
      ctx.save();
      ctx.translate(this.x+20,this.y+80);
      ctx.rotate(this.r);
      ctx.translate(-this.x+20,-this.y-80);
      ctx.beginPath();
      ctx.moveTo(this.x,this.y + 5);
      ctx.lineTo(this.x,this.y + 22);
      ctx.moveTo(this.x-9,this.y + 35);
      ctx.lineTo(this.x - 26,this.y + 45);
      ctx.lineTo(this.x - 26,this.y + 75);
      ctx.lineTo(this.x,this.y + 90);
      ctx.lineTo(this.x + 18,this.y + 80);
      ctx.moveTo(this.x + 26,this.y + 68);
      ctx.lineTo(this.x + 26,this.y + 45);
      ctx.lineTo(this.x + 9,this.y + 35);
      ctx.moveTo(this.x - 20,this.y + 47);
      ctx.lineTo(this.x - 20,this.y + 73);
      ctx.moveTo(this.x + 23,this.y + 42);
      ctx.lineTo(this.x + 36,this.y + 32);
      ctx.moveTo(this.x + 26,this.y + 46);
      ctx.lineTo(this.x + 39,this.y + 36);
      ctx.moveTo(this.x + 34,this.y + 81);
      ctx.lineTo(this.x + 48,this.y + 90);
      ctx.moveTo(this.x - 2,this.y + 88);
      ctx.lineTo(this.x - 2,this.y + 110);
      ctx.moveTo(this.x + 3,this.y + 88);
      ctx.lineTo(this.x + 3,this.y + 110);
      ctx.moveTo(this.x - 26,this.y + 45);
      ctx.lineTo(this.x - 46,this.y + 38);
      ctx.moveTo(this.x - 60,this.y + 44);
      ctx.lineTo(this.x - 74,this.y + 58);
      ctx.lineTo(this.x - 61,this.y + 77);
      ctx.moveTo(this.x - 58,this.y + 49);
      ctx.lineTo(this.x - 68,this.y + 59);
      ctx.moveTo(this.x - 46,this.y + 82);
      ctx.lineTo(this.x - 26,this.y + 73);
      ctx.moveTo(this.x - 60,this.y + 86);
      ctx.lineTo(this.x - 70,this.y + 100);
      ctx.strokeStyle = "rgba(255,255,255,0.2)";
      ctx.lineWidth = 3;
      ctx.stroke();
      ctx.fillStyle = "rgba(255,255,255,0.2)";
      ctx.font = "15px Arial";
      ctx.fillText("CH", this.x - 5, this.y);
      ctx.fillText("3", this.x + 18, this.y+6);
      ctx.fillText("N", this.x - 5, this.y+37);
      ctx.fillText("O", this.x + 38, this.y+35);
      ctx.fillText("N", this.x + 21, this.y+81);
      ctx.fillText("CH", this.x + 50, this.y+99);
      ctx.fillText("3", this.x + 72, this.y+105);
      ctx.fillText("O", this.x - 5, this.y+124);
      ctx.fillText("N", this.x - 59, this.y+42);
      ctx.fillText("N", this.x - 59, this.y+84);
      ctx.fillText("H  C", this.x - 98, this.y+114);
      ctx.fillText("3", this.x - 87, this.y+119);
      ctx.closePath();
      ctx.restore();
    }
    else if(mol == "C6H6"){
      //Benzene
      ctx.save();
      ctx.translate(this.x+20,this.y+80);
      ctx.rotate(this.r);
      ctx.translate(-this.x+20,-this.y-80);
      ctx.beginPath();
      ctx.moveTo(this.x,this.y + 30);
      ctx.lineTo(this.x - 26,this.y + 45);
      ctx.lineTo(this.x - 26,this.y + 75);
      ctx.lineTo(this.x,this.y + 90);
      ctx.lineTo(this.x + 26,this.y + 75);
      ctx.lineTo(this.x + 26,this.y + 45);
      ctx.lineTo(this.x,this.y + 30);
      ctx.moveTo(this.x - 20,this.y + 47);
      ctx.lineTo(this.x - 20,this.y + 73);
      ctx.moveTo(this.x,this.y + 83);
      ctx.lineTo(this.x + 22,this.y + 70);
      ctx.moveTo(this.x,this.y + 36);
      ctx.lineTo(this.x + 22,this.y + 49);
      ctx.strokeStyle = "rgba(255,255,255,0.2)";
      ctx.lineWidth = 3;
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
    }
  }
}

init();

function animloop() {
  draw();
  requestAnimFrame(animloop);
}

$(function(){
	layui.use(['layer', 'form'], function() {
		var layer = layui.layer,
			$ = layui.jquery,
			form = layui.form();
	});
})

function login(){
	var username = $("#username").val();
	var password = $("#password").val();
	if(username.trim().length < 6){
		$.pt({
			target: $("#username"),
			position: 'r',
			align: 't',
			width: 'auto',
			height: 'auto',
			content:"用户名不能少于6位"
		});
		return false;
	}
	//密码只能是5-15位
	var regExp = new RegExp("^.{5,15}$");
	if(!regExp.test(password)){
		$.pt({
			target: $("#password"),
			position: 'r',
			align: 't',
			width: 'auto',
			height: 'auto',
			content:"密码只能是5-15位"
		});
		return false;
	}
	alert("登录OR注册成功");
}

function goto_register(){
	$("#register").show();
	$("#login").hide();
	$("#reset").hide();
}

function register(){
	var regcode_register = $("#regcode_register").val();
	var username_register = $("#username_register").val();
	var password_register = $("#password_register").val();
	var determine_password_register = $("#determine_password_register").val();
	if(username_register.trim().length < 6){
		$.pt({
			target: $("#username_register"),
			position: 'r',
			align: 't',
			width: 'auto',
			height: 'auto',
			content:"用户名不能少于6位"
		});
		return false;
	}
	//密码只能是5-15位
	var regExp = new RegExp("^.{5,15}$");
	if(!regExp.test(password_register)){
		$.pt({
			target: $("#password_register"),
			position: 'r',
			align: 't',
			width: 'auto',
			height: 'auto',
			content:"密码只能是5-15位"
		});
		return false;
	}
	//两次输入的密码要一致
	if(password_register != determine_password_register){
		$.pt({
			target: $("#determine_password_register"),
			position: 'r',
			align: 't',
			width: 'auto',
			height: 'auto',
			content:"两次输入的密码不一致"
		});
		return false;
	}
	//注册码不能为空
	
	alert("注册成功");
}
function goto_login(){
	$("#register").hide();
	$("#login").show();
	$("#reset").hide();
}
function goto_forget(){
	$("#register").hide();
	$("#login").hide();
	$("#reset").show();
}

animloop();
</script>




</body></html>